import { useRouter } from "next/navigation";
import { Card, Button } from "antd";

interface AppItem {
  key: string
  label: string
  icon: string
  description: string
  href: string
}

interface AppCardProps {
  app: AppItem
  isInstalled: boolean
  onInstall: (app: AppItem) => void
}

export default function AppCard({ app, isInstalled, onInstall }: AppCardProps) {
  const router = useRouter()

  return (
    <Card
      hoverable
      className="h-full"
      onClick={() => router.push(app.href)}
    >
      <div className="flex items-start gap-3">
        <div className="text-2xl">{app.icon}</div>
        <div className="flex-1">
          <div className="font-medium mb-1">{app.label}</div>
          <div className="text-sm text-gray-500 line-clamp-2">{app.description}</div>
        </div>
      </div>
      <div className="mt-4 flex justify-end">
        <Button
          type={isInstalled ? 'default' : 'primary'}
          size="small"
          onClick={(e: React.MouseEvent) => {
            e.stopPropagation()
            onInstall(app)
          }}
        >
          {isInstalled ? '已安装' : '安装'}
        </Button>
      </div>
    </Card>
  )
}
